
<div class="container-fluid">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body" style="margin-bottom: 0px;">
                <div class="form-inline" style="margin-bottom: 5px;">
                    <label>工号:</label>
                    <input id="user_id" style="width: 100px;" class="form-control">
                    &nbsp;&nbsp;
                    <label>姓名:</label>
                    <input id="user_name" style="width: 100px;" class="form-control">
                    &nbsp;&nbsp;
                    <label>角色:</label>
                    <select id="role_id" class="form-control">
                        <option value="">全部</option>
                        <option value="" disabled>--------------------</option>
                        {volist name='roleList' id='vo'}
                        <option value="{$vo.ROLE_ID}">{$vo.NAME}</option>
                        {/volist}
                    </select>
                    &nbsp;&nbsp;
                    <button class="btn btn-default" onclick="$('#list-table').bootstrapTable('refresh');">
                        <span class="fa fa-search"></span>&nbsp;查询
                    </button>
                    &nbsp;&nbsp;
                    <button class="btn btn-info" onclick="clickAdd()">
                        <span class="fa fa-plus"></span>&nbsp;新增
                    </button>
                </div>
                <table id="list-table"></table>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var h = $(window).height();
        $("#list-table").bootstrapTable({
            url:'getUserList',
            method:'post',
            sidePagination: 'server',
            pagination:true,
            pageSize:20,
            pageList:[10,20,50],
            pageNumber:1,
            height:h - 180,
            columns:[{
                title:'工号',
                field:'USER_ID',
                sortable:true
            },{
                title:'姓名',
                field:'USER_NAME',
                sortable:true
            },{
                title:'所在学院',
                field:'COLLEGE',
                sortable:true
            },{
                title:'角色',
                field:'ROLE_NAME'
            },{
                title:'操作',
                field:'USER_ID',
                halign:'center',
                align:'center',
                formatter:function (value,rowData,index) {
                    var html1 = "<button class='btn btn-xs btn-info' USER_ID='" + rowData['USER_ID'] + "' ROLE_ID='" + rowData['ROLE_ID'] + "'" +
                        " style='margin: 2px;' onclick='clickEdit(this)'>数据范围</button>"
                    var html2 = "<button class='btn btn-xs btn-danger' USER_ID='" + rowData['USER_ID'] + "' ROLE_ID='" + rowData['ROLE_ID'] + "'" +
                        " style='margin: 2px;' onclick='clickDelete(this)'>删除</button>"
                    return html1 + html2;
                }
            }],
            queryParams:function (params) {
                params.user_id = $('#user_id').val();
                params.user_name = $("#user_name").val();
                params.role_id = $("#role_id").val();
                return params;
            },
            responseHandler:function (res) {
                // res = JSON.parse(res);
                console.log(res);
                return res;
            }
        });
    });

    function clickAdd() {
        var h = $(window).height()*0.8;
        var w = $(window).width()*0.8;
        layer.open({
            title:'新增管理员',
            area:[w + 'px', h + 'px'],
            type:2,
            content:"{:url('addPage')}"
        });
    }

    function clickEdit(obj) {
        var userId = $(obj).attr('USER_ID');
        var roleId = $(obj).attr('ROLE_ID');
        var h = $(window).height()*0.8;
        var w = $(window).width()*0.8;
        if(w > 1200){
            w = 1200;
        }
        layer.open({
            title:'数据范围',
            area:[w + 'px', h + 'px'],
            type:2,
            content:"{:url('editPage')}?userId="+userId+"&roleId="+roleId,
            end:function () {
                $("#list-table").bootstrapTable('refresh');
            }
        });
    }

    function clickDelete(obj) {
        var userId = $(obj).attr('USER_ID');
        var roleId = $(obj).attr('ROLE_ID');
        layer.confirm('确认删除该用户吗?',{icon:2},function (index) {
            layer.close(index);
            ajax("{:url('delete')}",{userId:userId,roleId:roleId},function (data) {
                $("#list-table").bootstrapTable('refresh');
            });
        });
    }

</script>